<template>
  <view class="seckill-page">
    <view class="header">
      <uv-icon name="clock" size="18" color="#FF6B00"></uv-icon>
      <text class="title">限时秒杀</text>
    </view>

    <view class="content">
      <image class="banner" src="https://placehold.co/750x280/png?text=%E9%99%90%E6%97%B6%E7%A7%92%E6%9D%80" mode="aspectFill" />
      <view class="empty" v-if="items.length === 0">
        <uv-icon name="info-circle" size="20" color="#999"></uv-icon>
        <text class="empty-text">当前暂无秒杀活动</text>
      </view>
      <view class="list" v-else>
        <view class="item" v-for="g in items" :key="g.id" @click="goDetail(g.id)">
          <image :src="g.image" class="thumb" mode="aspectFill" />
          <view class="meta">
            <text class="name">{{ g.name }}</text>
            <view class="price-row">
              <text class="price">¥{{ g.seckill_price }}</text>
              <text class="origin">¥{{ g.original_price }}</text>
            </view>
          </view>
          <uv-icon name="arrow-right" size="14" color="#ccc"></uv-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 中文注释，变量/函数使用英文
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goodsApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const title = ref('限时秒杀')
const endTime = ref(0)
const items = ref([])

// 加载秒杀数据
const loadSeckill = async () => {
  try {
    uni.showLoading({ title: '加载中...' })
    const data = await goodsApi.getSeckillGoods()
    title.value = data?.title || '限时秒杀'
    endTime.value = data?.end_time ? new Date(data.end_time).getTime() : 0
    items.value = data?.goods || []
  } catch (e) {
    proxy?.$showToast?.('加载失败')
  } finally {
    uni.hideLoading()
  }
}

onLoad(() => {
  loadSeckill()
})

const goDetail = (id) => {
  proxy?.$navigateTo?.(`/pages/goods/detail?id=${id}`)
}
</script>

<style lang="scss" scoped>
.seckill-page {
  min-height: 100vh;
  background: $uni-bg-color-grey;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1rpx solid $uni-border-color;

  .title {
    margin-left: 10rpx;
    font-size: 30rpx;
    color: #333;
    font-weight: 600;
  }
}

.content {
  padding: 20rpx;

  .banner {
    width: 100%;
    height: 280rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06);
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80rpx 0;

    .empty-text {
      margin-top: 12rpx;
      color: #999;
      font-size: 26rpx;
    }
  }

  .list {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06);

    .item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid $uni-border-color;

      &:last-child {
        border-bottom: 0;
      }

      .thumb {
        width: 140rpx;
        height: 140rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }

      .meta {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10rpx;

        .name {
          font-size: 28rpx;
          color: #333;
        }

        .price-row {
          display: flex;
          align-items: baseline;
          gap: 12rpx;

          .price {
            color: $uni-color-primary;
            font-weight: 700;
            font-size: 30rpx;
          }
          .origin {
            color: #aaa;
            font-size: 22rpx;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>
